import 'package:flutter/material.dart';
import 'package:waterfall_flow/waterfall_flow.dart';




class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this); // 初始化TabController，设置Tab数量
  }

  @override
  void dispose() {
    _tabController.dispose(); // 释放TabController资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('发现'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: '最新'),
            Tab(text: 'UI/UX'),
            Tab(text: '平面'),
            Tab(text: '插画/漫画'),
            Tab(text: '摄影'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // 最新页面内容
          _buildLatestPage(),
          // UI/UX页面内容
          _buildUiUxPage(),
          // 平面页面内容
          _buildGraphicDesignPage(),
          // 插画/漫画页面内容
          _buildIllustrationPage(),
          // 摄影页面内容
          _buildPhotographyPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '关注'),
          BottomNavigationBarItem(icon: Icon(Icons.explore), label: '发现'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: '发布'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
        currentIndex: 1, // 设置当前选中的项
        selectedItemColor: Colors.blue,
        onTap: (int index) {
          // 添加底部导航栏点击事件处理逻辑
        },
      ),
    );
  }

  // 最新页面布局
  Widget _buildLatestPage() {
    return WaterfallFlow.builder(
      gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 8.0,
        crossAxisSpacing: 8.0,
      ),
      itemCount: 7,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Container(
            height: (index % 2 == 0) ? 75 : 300,
            color: (index % 2 == 0) ? Colors.blue : Colors.green,
            child: Center(
              child: Text(
                '最新 ${index+1}',
                style: Theme.of(context).textTheme.headline5,
              ),
            ),
          ),
        );
      },
    );
  }



  // UI/UX页面布局
  Widget _buildUiUxPage() {
    return GridView.count(
      crossAxisCount: 2,
      children: List.generate(4, (index) {
        return Card(
          child: Center(
            child: Text(
              'UI/UX $index',
              style: Theme.of(context).textTheme.headline5,
            ),
          ),
        );
      }),
    );
  }

  // 平面设计页面布局
  Widget _buildGraphicDesignPage() {
    return Column(
      children: [
        ListTile(
          leading: Icon(Icons.design_services),
          title: Text('平面设计项目1'),
          subtitle: Text('描述1'),
        ),
        ListTile(
          leading: Icon(Icons.design_services),
          title: Text('平面设计项目2'),
          subtitle: Text('描述2'),
        ),
        // 继续添加更多的项目...
      ],
    );
  }

  // 插画/漫画页面布局
  Widget _buildIllustrationPage() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Text('插画/漫画内容1'),
          SizedBox(height: 10),
          Text('插画/漫画内容2'),
          // 继续添加更多的内容...
        ],
      ),
    );
  }

  // 摄影页面布局
  Widget _buildPhotographyPage() {
    return ListView(
      children: [
        Card(
          child: Column(
            children: [
              ListTile(
                title: Text('摄影项目1'),
                subtitle: Text('描述1'),
              ),
            ],
          ),
        ),
        Card(
          child: Column(
            children: [
              ListTile(
                title: Text('摄影项目2'),
                subtitle: Text('描述2'),
              ),
            ],
          ),
        ),
        // 继续添加更多的项目...
      ],
    );
  }
}
